<template>
  <el-card>
    <template v-slot:header>
      <el-button type="primary" icon="el-icon-plus" @click="showAdd">添加</el-button>
    </template>
    <template>
      <el-table
        border
        v-loading="loading"
        style="width: 100%"
        :data="trademarks">
        <!-- 序号 -->
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="80">
        </el-table-column>
        <!-- <el-table-column
          label="序号">
          <template v-slot="{$index}">
            {{$index + 1}}
          </template>
        </el-table-column> -->

        <el-table-column
          prop="tmName"
          label="品牌名称">
        </el-table-column>

        <el-table-column
          label="品牌LOGO">
          <template v-slot="{row, $index}">
            <el-image :src="row.logoUrl" alt="logo" style="width: 100px;height: 80px;" />
          </template>
        </el-table-column>

        <!-- <slot :row="当前行数据对象" :$index="当前下标"/> -->


         <el-table-column
          label="操作">
          <template v-slot="{row}">
            <el-button type="warning" size="small" icon="el-icon-edit" @click="showUpdate(row)">修改</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        style="margin-top: 20px; text-align: center;"
        :current-page="page"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper, ->, sizes, total"
        >
      </el-pagination>

      <el-dialog :title="`${form.id ? '修改' : '添加'}品牌`" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="20%" style="width: 80%">

          <el-form-item label="品牌名称">
            <el-input v-model="form.tmName" placeholder="请输入品牌名称"></el-input>
          </el-form-item>

          <el-form-item label="品牌LOGO">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50kb</div>
            </el-upload>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </el-card>
</template>

<script>
export default {
  name: 'TrademarkList',
   data() {
    return {
      trademarks:  [], // 当前页列表
      page: 1, // 当前页码
      pageSize: 5, // 每页数量
      total: 0, // 总数量
      loading: false, // 是否正在请求加载中

      dialogFormVisible: false, // 对话框是否显示
      form: { // 用于收集表单的form对象
        tmName: '',
        logoUrl: '',
      },
    }
   },

  async mounted () {
    // 初始获取第一页列表显示
    this.getList()
  },

  methods: {

    /* 
    显示修改界面
    */
    showUpdate (trademark) {  // {tmName: 'a', logoUrl: 'url'}
      // 指定表单数据
      // this.form = trademark   // 问题: 2个引用变量指向同一个对象导致
      /* 
      问题2: 点击修改品牌, 指定新的品牌名称后, 不能取消
	    原因: 列表中的当前品牌的名称已经修改了
      解决: 对要修改的trademark做浅拷贝   ==> 不需要深拷贝, 因为对象中的属性是基本类型的string
      */
      this.form = {...trademark}

      // 显示dialog
      this.dialogFormVisible = true
    },

    /* 
    显示添加界面
    */
    showAdd () {
      /* 
      问题1: 点击修改后再点击添加显示修改界面
      原因: 点击添加时, 修改时指定form数据还在
      解决: 点击添加时先清除form数据
      */
      this.form = {
        tmName: '',
        logoUrl: '',
      }
      // 显示dialog
      this.dialogFormVisible = true
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    /* 
    处理每页数量发生改变的监听
    */
    handleSizeChange (pageSize) {
      // 更新每页数量
      this.pageSize = pageSize
      // 更新当前页码为1
      this.page = 1
      // 请求获取当前页码的列表数据
      this.getList()
    },

    /* 
    处理当前页码发生改变的监听
    currentPage: 当前最新页码
    */
    handleCurrentChange (currentPage) {
      // 更新page
      this.page = currentPage
      // 请求获取当前页码的列表数据
      this.getList()
    },

    async getList () {
      this.loading = true // 显示loading
      // 请求获取数据
      const result = await this.$API.trademark.getList(this.page, this.pageSize)
      this.loading = false // 隐藏loading
      // 读取数据更新
      const {records, total} = result.data
      this.trademarks = records
      this.total = total
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style lang="scss" scoped>

</style>
